<template>
  <div class="tag-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
          <checkbox-select v-model="selectValue" placeholder="是否合格" :options="selectOptions" @change="handleChange"></checkbox-select>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in tabProps" :key="index">
            <label class="prop-name">{{ item.name }}：</label>
            <span class="prop-desc">{{ item.desc }}</span>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in tabMethods" :key="index">
            <label class="prop-name">{{ item.name }}：</label>
            <span class="prop-desc">{{ item.desc }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
// import CheckboxSelect from '@/components/el-extend-components/CheckboxSelect/CheckboxSelect'
export default {
  name: 'CheckboxSelectDemo',
  components:{
    // CheckboxSelect
  },
  data() {
    return {
        selectValue:[],
        selectOptions:[{
            value: '1',
            label: '是'
        }, {
            value: '0',
            label: '否'
        }],
        tabProps:[
            {
                name:'v-model',
                desc:'绑定值。类型：Array'
            },
            {
                name:'placeholder',
                desc:'占位符。默认值：请选择。类型：string。'
            },
            {
                name:'options',
                desc:'下拉选项。默认值：[]。类型：Array。元素格式为[{value:XXX,label:XXX}]'
            }
        ],
        tabMethods:[
            {
                name:'change',
                desc:'参数：value(目前的选中值)、checkAll(是否为全选状态)。选中值发生变化时触发。'
            }
        ]
    }
  },
  computed: {

  },
  mounted() {

  },
  methods: {
    handleChange({value, checkAll}){
        console.log(value, checkAll);
    }
  },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.tag-demo-wrapper {
  width: 100%;
  height: 100%;
  .filter-content{
    padding: 10px;
    background: #fff;
    border: 1px solid lightgray;
    .filter-item:nth-child(1){
      border: none;
    }
    .filter-item{
      border-top: 1px dotted lightgray;
    }
  }
}

</style>
